import React from 'react';
import './App.css';
import { Link, Route } from 'react-router-dom';
import home from "./viwes/home"
import List from "./viwes/list"
import detill from "./viwes/detill"

import {connect} from "react-redux"
import { Layout, Menu, Icon } from 'antd';

const { Header, Sider, Content } = Layout;

class App extends React.Component {
  state = {
    collapsed: false,
    type: '111'
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };
  aa(){
    
    this.props.setName('zhansga')
  }

  render() {
    return (
      <Layout>

        <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
          <div className="logo" />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            <Menu.Item key="1">
              <Link to='/App/'><Icon type="user" />
                <span>首页</span></Link>
            </Menu.Item>
            <Menu.Item key="2">
              <Link to='/App/list'> <Icon type="video-camera" />
                <span>列表</span></Link>
            </Menu.Item>
            <Menu.Item key="3">
              <Link to='/App/detill'> <Icon type="upload" />
                <span>详情</span></Link>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
         
          <Header style={{ background: '#fff', padding: 0 }}>
            <Icon
              className="trigger"
              type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
              onClick={this.toggle}
            />
          </Header>
          <Content
           
          >
             {this.props.name} 
             <button onClick={this.aa.bind(this)}>点击</button>
            <Route path='/App/' exact component={home}></Route>
            <Route path='/App/List' component={List}></Route>
            <Route path='/App/detill' component={detill}></Route>
            
            
          </Content>

        </Layout>


      </Layout>
    );
  }
}

export default connect(function(state,props){
  console.log(state)
  return state.user
},{
  setName(name){
    return {
      type: 'SET_NAME',
      name
    };
  },
}

)(App);
